<template>
  <div class="split_create">
    <div class="top_treadcrumb">
      <span v-if="this.actionType === 'create'">创建</span>
      <span v-else-if="this.actionType === 'edit'">编辑</span>
      <span v-else>查看</span><span>计划</span>
    </div>
    <div class="allocation_content">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="方案名称" prop="schemeName">
          <span v-if="actionType === 'detail'">{{ form.schemeName }}</span>
          <el-input
            v-else
            placeholder="请填写方案名称"
            style="width: 240px;"
            v-model="form.schemeName"
          ></el-input>
        </el-form-item>
        <el-form-item label="分成方式" prop="payType">
          <span v-if="actionType === 'detail'">
            <span v-if="form.payType === 1">固定分成方式</span>
            <span v-if="form.payType === 2">日期方式</span>
            <span v-if="form.payType === 3">充值金额方式</span>
            <span v-if="form.payType === 4">日期与金额混合</span>
          </span>
          <el-select
            v-else
            style="width: 240px;"
            v-model="form.payType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in modeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
              <span style="float: left">{{ item.label }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应用角色" required>
          <span>{{form.suitRoleName}}</span>
        </el-form-item>
        <el-form-item label="分成方案" required>
          <div
            class="care_item"
            v-for="(item, index) in form.schemeDetails"
            :key="index"
          >
            <el-form-item
              label=""
              :prop="`schemeDetails.${index}.startdays`"
              :rules="rules.startdays"
              class="demo-form-inline"
              v-if="form.payType === 4 || form.payType === 2"
            >
                <span>从</span>
                <el-input
                  placeholder="请输入"
                  style="width: 87px;"
                  v-model="item.startdays"
                  @input.native="inputNumberHandle"
                ></el-input>
                <span>天</span>
            </el-form-item>
            <el-form-item
              label=""
              class="demo-form-inline"
              :prop="`schemeDetails.${index}.enddays`"
              :rules="rules.enddays"
              v-if="form.payType === 4 || form.payType === 2"
            >
                <span>到</span>
                <el-input
                  placeholder="请输入"
                  style="width: 87px;"
                  v-model="item.enddays"
                  @input.native="inputNumberHandle"
                ></el-input>
                <span>天</span>
            </el-form-item>
           <el-form-item
              label=""
              :prop="`schemeDetails.${index}.startamount`"
              class="demo-form-inline"
              :rules="rules.startamount"
              v-if="form.payType === 4 || form.payType === 3"
            >
              <span>金额在</span>
              <el-input
                placeholder="请输入金额"
                style="width: 150px;"
                v-model="item.startamount"
                @input.native="inputNumberHandle"
              ></el-input>
            </el-form-item>
           <el-form-item
              label=""
              :prop="`schemeDetails.${index}.endamount`"
              class="demo-form-inline"
              :rules="rules.endamount"
              v-if="form.payType === 4 || form.payType === 3"
            >
              <span>到</span>
              <el-input
                placeholder="请输入金额"
                style="width: 150px;"
                v-model="item.endamount"
                @input.native="inputNumberHandle"
              ></el-input>
              <span>之间的</span>
            </el-form-item>
            <el-form-item
              label=""
              class="demo-form-inline"
              :prop="`schemeDetails.${index}.tcpercent`"
              :rules="rules.tcpercent"
            >
              <span>提成</span>
              <el-input
                placeholder="请输入"
                style="width: 87px;"
                v-model="item.tcpercent"
                @input.native="inputNumberHandle"
              ></el-input>
              <span>%</span>
              <span 
                v-if="actionType !== 'detail'"
                @click="addOne" class="add_btn small_btn"
              >+</span>
              <span
                @click="reduceOne(index)"
                v-if="form.schemeDetails.length > 1  && actionType !== 'detail'"
                class="reduce_btn small_btn"
              >-</span>
            </el-form-item>
          </div>
          <div class="tips">
            <p>
              <span>*</span>
              天数是从推广员与玩家绑定时开始计算。从绑定之日起计算的话，天数从0天开始。
            </p>
            <p>
              <span>*</span>
              金额为玩家充值的累加金额。
            </p>
          </div>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <span v-if="actionType === 'detail'">{{ form.remark }}</span>
          <el-input
            v-else
            style="width:832px;"
            type="textarea"
            placeholder="请输入"
            maxlength="150"
            v-model="form.remark"
            show-word-limit
          ></el-input>
        </el-form-item>
        <div style="text-align: center;padding-bottom: 28px;margin-top:60px;">
          <el-button style="width: 87px;" @click="cancel('form')">
            取消
          </el-button>
          <el-button
            v-if="actionType === 'create'"
            style="width: 87px;"
            type="primary"
            @click="createProgram('form')"
            >创建</el-button
          >
          <el-button
            v-else-if="actionType === 'edit'"
            style="width: 87px;"
            type="primary"
            @click="editProgram('form')"
            >确认</el-button
          >
          <el-button
            v-else
            style="width: 87px;"
            type="primary"
            @click="editItem('form')"
            >编辑</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { addScheme,getDtoById,modifyScheme } from "@/api/splitallocation";
import { getCookie } from "@/utils/auth";

import {
  SPLIT_TYPE_OPTIONS_SET,
} from "../../const";

export default {
  data() {
    return {
      actionType: "detail",
      modeOptions: SPLIT_TYPE_OPTIONS_SET,
      RoleName:'',
      form: {
        schemeName: "",   //方案名称
        remark: "",   //备注
        payType: '',  //分成方式
        suitRole:'',  //适用角色
        suitRoleName:'',//适用角色名
        schemeDetails: [
          {
            startdays: "",
            enddays: "",
            startamount: "",
            endamount: "",
            tcpercent: "",
          }
        ]
      },
      rules: {
        commission: [
          { required: true, message: "请输入分成百分比", trigger: "change" }
        ],
        schemeName: [
          { required: true, message: "请输入方案名称", trigger: "change" }
        ],
        payType: [
          { required: true, message: "请选择分成方式", trigger: "change" }
        ],
        startdays: [
          { required: true, message: "请输入开始天数", trigger: "change" }
        ],
        enddays: [
          { required: true, message: "请输入截止天数", trigger: "change" }
        ],
        startamount: [
          { required: true, message: "请输入金额", trigger: "change" }
        ],
        endamount: [
          { required: true, message: "请输入金额", trigger: "change" }
        ],
        tcpercent: [
          { required: true, message: "请输入分成比例", trigger: "change" }
        ],
      }
    };
  },
  created() {
    this.actionType = this.$route.query.type;
    switch (getCookie("roleType")) {
      case "1":
        this.RoleName = "推广商";
        this.form.suitRole = 2;
        this.form.suitRoleName = '推广员';
        break;
      case "2":
        this.RoleName = "推广员";
        break;
      case "3":
        this.RoleName = "代理商";
        this.form.suitRole = 1;
        this.form.suitRoleName = '推广商';
        break;
    }
    if (this.$route.query.id) {
      this.getDetailInfo();
    }
  },
  methods: {
    cancel() {
      this.$router.back();
    },
    addOne() {
      this.form.schemeDetails.push({
          startdays: "",
          enddays: "",
          startamount: "",
          endamount: "",
          tcpercent: "",
      });
    },
    reduceOne(index) {
      this.form.schemeDetails.splice(index, 1);
    },
    // 获取详情
    getDetailInfo() {
      getDtoById({ id: this.$route.query.id }).then(res => {
        this.form.schemeName = res.data.schemename
        this.form.remark = res.data.remark
        this.form.payType = res.data.paytype
        this.form.suitRole = res.data.suitrole
        this.form.schemeDetails = res.data.schemedetails
      });
    },
    // 编辑推广分成方案
    editProgram(){
      this.$refs.form.validate(valid => {
        if (valid) {
          var data = {
              id: this.$route.query.id,
              schemeName: this.form.schemeName,
              payType: this.form.payType,
              suitRole: this.form.suitRole,
              remark: this.form.remark,
              schemeDetails: this.form.schemeDetails,
          }
          modifyScheme(data).then((res)=>{
            if(res.code === 0){
              this.$message({
                message: "修改成功",
                type: "success"
              });
              this.$router.back();
            }else{
              this.$message.error({type: res.message});
            }
          })
        }
      });
    },
    // 去编辑推广方案分成
    editItem() {
      this.actionType = "edit";
    },
    inputNumberHandle({target}){
      target.value = target.value.replace(/[^\d]/g,'');
    },
    // 创建推广分成方案
    createProgram() {
      this.$refs.form.validate(valid => {
        if (valid) {
          addScheme(this.form).then((res)=>{
            if(res.code === 0){
              this.$message({
                message: "添加成功",
                type: "success"
              });
              this.$router.back();
            }else{
              this.$message.error({type: res.message});
            }
          })
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.split_create {
  .top_treadcrumb {
    font-family: PingFangSC-Semibold;
    font-size: 18px;
    color: #141414;
    letter-spacing: 0;
    line-height: 18px;
    font-weight: 600;
  }
  .allocation_content {
    background: #ffffff;
    box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.09);
    border-radius: 4px;
    padding: 28px 32px 0 32px;
    margin: 0 0 16px 0;
    margin-top: 21px;
  }
  .small_btn {
    width: 14px;
    height: 14px;
    color: #fff;
    box-sizing: border-box;
    line-height: 14px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
  }
  .add_btn {
    background: var(--themeColor);
    margin: 0 16px;
  }
  .reduce_btn {
    background: var(--themeColor);
  }
  .el-form-item{
    margin-bottom: 20px;
  }
  .demo-form-inline{
    display: inline-block;
  }
  .tips {
    font-size: 12px;
    color: #777;
    p {
      line-height: 18px;
      span {
        color: #e02020;
      }
    }
  }
}
</style>
